<script>
  export default {
    data() {
      return{
        WIDout_trade_no: "",
        WIDtotal_amount: "",
        WIDsubject: "",
        WIDbody: "",
        dd: {},
        tableData: [],

      }
    },
    methods:{
      findById(){
        var a = localStorage.getItem("dd");
        this.dd = JSON.parse(a);
        console.log("dd=" + this.dd);

        // this.axios.post('http://localhost:9000/placeOrder/confirm-order/findById?id='+this.dd).then(res => {
        //   this.tableData = res.data;
        //   this.GetDateNow();
        // })

        // this.axios.post('http://localhost:9000/placeOrder/receiving-address/finddd?id='+this.dz).then(response => {
        //   this.tableData1 = response.data;
        // }).catch(error => {
        //   console.error("请求错误:", error); // 错误处理
        // });

      },
      GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        this.WIDout_trade_no = sNow;
        this.WIDsubject = "测试";
        this.WIDtotal_amount = this.dd;
      },
      zf() {
        location.href = "http://localhost:8081/pay?" +
            "WIDout_trade_no=" + this.WIDout_trade_no +
            "&WIDsubject=" + this.WIDsubject +
            "&WIDtotal_amount=" + this.WIDtotal_amount +
            "&WIDbody=" + this.WIDbody // 添加返回URL
      },
      fh() {
        this.$router.push('/Confirm_order');
      },
    },
    created() {
      this.findById();
      this.GetDateNow();
    }
  }
</script>

<template>
  <div style="margin: 0 auto; background-color: #f2f2f2; width: 500px; height: 800px; border-radius: 10px;">
    <div><img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/img.png" width="100%" height="30px" style="border-radius: 10px 10px 0 0;"></div>

    <p style="text-align: center; font-size: 20px; background-color: #1d222d; padding: 20px 0; color: #fff; width: 100%;"><img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241121155729.png" @click="fh()" style="margin-left: 30px; width: 30px; height: 30px;  float: left;">支付宝支付入口</p>
    <div>
      <form name=alipayment action=pay method=post
            target="_blank">
        <div id="body1" class="show" name="divcontent">
          <dl class="content">
            <dt>商户订单号 ：</dt>
            <dd>
              <input id="WIDout_trade_no" name="WIDout_trade_no" :value="WIDout_trade_no" readonly/>
            </dd>
            <hr class="one_line">
            <dt>订单名称 ：</dt>
            <dd>
              <input id="WIDsubject" name="WIDsubject" :value="WIDsubject" readonly/>
            </dd>
            <hr class="one_line">
            <dt>付款金额 ：</dt>
            <dd>
              <input id="WIDtotal_amount" name="WIDtotal_amount" :value="WIDtotal_amount" readonly/>
            </dd>
            <hr class="one_line">
            <dt>商品描述：</dt>
            <dd>
              <input id="WIDbody" name="WIDbody" :value="WIDbody" />
            </dd>
            <hr class="one_line">
            <dt></dt>
            <dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit" style="text-align: center;" @click="zf()">付 款</button>
						</span>
              <p class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</p>
            </dd>
          </dl>
        </div>
      </form>
    </div>

    <div id="foot">
      <ul class="foot-ul">
        <li>版权所有 2300-2500</li>
      </ul>
    </div>
  </div>
</template>

<style>
*{
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
  sans-serif;
}

.tab-head {
  margin-left: 120px;
  margin-bottom: 10px;
}

.tab-content {
  clear: left;
  display: none;
}

h2 {
  border-bottom: solid #02aaf1 2px;
  width: 200px;
  height: 25px;
  margin: 0;
  float: left;
  text-align: center;
  font-size: 16px;
}

.selected {
  color: #FFFFFF;
  background-color: #02aaf1;
}

.show {
  clear: left;
  display: block;
}

.hidden {
  display: none;
}

.new-btn-login-sp {
  padding: 1px;
  display: inline-block;
  width: 75%;
}

.new-btn-login {
  background-color: #02aaf1;
  color: #FFFFFF;
  font-weight: bold;
  border: none;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
}

#main {
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
}

.red-star {
  color: #f00;
  width: 10px;
  display: inline-block;
}

.null-star {
  color: #fff;
}

.content {
  margin-top: 5px;
}

.content dt {
  width: 100px;
  display: inline-block;
  float: left;
  margin-left: 20px;
  color: #666;
  font-size: 13px;
  margin-top: 8px;
}

.content dd {
  margin-left: 120px;
  margin-bottom: 5px;
}

.content dd input {
  width: 85%;
  height: 28px;
  border: 0;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
}

#foot {
  margin-top: 320px;
  //position: absolute;
  bottom: 15px;
  width: 100%;
}

.foot-ul {
  width: 100%;
}

.foot-ul li {
  width: 100%;
  text-align: center;
  color: #666;
}

.note-help {
  color: #999999;
  font-size: 12px;
  line-height: 130%;
  margin-top: 5px;
  width: 100%;
  display: block;
}

#btn-dd {
  margin: 20px;
  text-align: center;
}

.foot-ul {
  width: 100%;
}

.one_line {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #eeeeee;
  width: 100%;
  margin-left: 20px;
}

.am-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: box;
  width: 100%;
  position: relative;
  padding: 7px 0;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background: #1D222D;
  height: 50px;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  box-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  box-align: center;
}

.am-header h1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  box-flex: 1;
  line-height: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}
</style>